<template>
  <view class="card_record">
    <uni-nav-bar @clickLeft="$ui.back()" dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF" left-icon="left" status-bar title="购卡记录" />
    <view class="tabs flex-row-between-center">
      <view @click="index = 1" :class="['tab', index === 1 ? 'active-tab' : '']">
        <text>未使用</text>
        <view :class="[index === 1 ? 'slider' : 'none']"></view>
      </view>
      <view @click="index = 2" :class="['tab', index === 2 ? 'active-tab' : '']">
        <text>已使用</text>
        <view :class="[index === 2 ? 'slider' : 'none']"></view>
      </view>
      <view  @click="index = 3" :class="['tab', index === 3 ? 'active-tab' : '']">
        <text>已过期</text>
        <view :class="[index === 3 ? 'slider' : 'none']"></view>
      </view>
    </view>
    <view class="tab-content">
      <template v-if="index == 1">
        <view class="cell flex-col-between" v-for="(item,index) in list" :key="index">
          <view class="cell-first flex-row-between-center">
            <view>
              <text class="monthly">{{item.title}}</text>
              <text class="term">{{item.tian}}天</text>
            </view>
            <text class="progress">{{getstatus(item.status)}}</text>
          </view>
          <view class="cell-second flex-row-between-center">
            <view>
              <text class="purchase">购买价格</text>
              <text class="price">{{item.money}}</text>
            </view>
            <text class="time">{{item.time}}</text>
          </view>
          <view class="text_five">
            <text class="text_fiveone" @click="useClick(item.id)">使用</text>
          </view>
        </view>
      </template>
      <template v-if="index == 2">
        <view class="cell flex-col-between" v-for="(item,index) in list" :key="index">
          <view class="cell-first flex-row-between-center">
            <view>
              <text class="monthly">{{item.title}}</text>
              <text class="term">{{item.tian}}天</text>
            </view>
            <text class="progress">{{getstatus(item.status)}}</text>
          </view>
          <view class="cell-second flex-row-between-center">
            <view>
              <text class="purchase">购买价格</text>
              <text class="price">{{item.money}}</text>
            </view>
            <text class="time">{{item.time}}</text>
          </view>
        </view>
      </template>
      <template v-if="index == 3">
        <view class="cell flex-col-between" v-for="(item,index) in list" :key="index">
          <view class="cell-first flex-row-between-center">
            <view>
              <text class="monthly">{{item.title}}</text>
              <text class="term">{{item.tian}}天</text>
            </view>
            <text class="progress">{{getstatus(item.status)}}</text>
          </view>
          <view class="cell-second flex-row-between-center">
            <view>
              <text class="purchase">购买价格</text>
              <text class="price">{{item.money}}</text>
            </view>
            <text class="time">{{item.time}}</text>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
  import {
    getMemberMiner,useMusthit
  } from '@/api/wincard/index.js'
  export default {
    data() {
      return {
        index: 1,
        status:0, // 待审核对应的0 未使用过的~1就是已完成 对应已经使用过的 2是已过期 对应的取消 
        list:[]
      }
    },
    watch: {
      index(val) {
        this.list = []
        if(val === 1) {
          this.status = 0
          this.getList()
        } else if(val === 2) {
           this.status = 1
            this.getList()
        } else if(val === 3) {
          this.status = 2
          this.getList()
        }
      }
    },
    onLoad() {
      this.getList()
    },
    methods: {
      getstatus(val){
        return val == 0 ? '未使用' : val == 1 ? '已使用' : val == 2 ? '已过期' : ''
      },
      getList(){
      	// 调用接口
      	getMemberMiner({
          page:1,
          status:this.status
      	}).then(res => {
          this.list = res.data
          console.log('成功res=', res)
      	}).catch((e) => {
      	}) 
      },
      // 使用
      useClick(id){
        this.$ui.show('提示','确认使用',true).then(res =>{
          if(res.confirm){
            useMusthit({
              id:id
            }).then(res => {
              console.log('成功购买')
              this.$ui.toast(res.msg)
              this.getList()
            }).catch((e) => {
            }) 
          }
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  .card_record {
    .tabs {
      height: 98rpx;
      background-color: #fff;
      padding: 0 119rpx;
      box-sizing: border-box;
      .tab {
        height: 98rpx;
        line-height: 98rpx;
        flex: 1;
        text-align: center;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        position: relative;
      }
      .active-tab {
        color: #333333;
        font-size: 28rpx;
        font-weight: bold;
      }
      .slider {
        width: 74rpx;
        height: 2rpx;
        background: #D2B17C;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
      }
      .none {
        display: none;
      }
    }
    .tab-content {
      margin-top: 40rpx;
      .cell {
        height: 138rpx;
        background-color: #fff;
        padding: 27rpx 18rpx 80rpx 78rpx;
        margin-top: 20rpx;
        position: relative;
        .monthly {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
        }
        .term {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          margin-left: 19rpx;
        }
        .progress {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #333333;
        }
        .purchase {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
        }
        .price {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #CBAE5E;
          margin-left: 16rpx;
        }
        .time {
          font-size: 20rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
        }
      }
      .text_five{
      	position: absolute;
      	top:180rpx;
      	right: 20rpx;
      	width: 131rpx;
      	height: 50rpx;
      	text-align: center;
      	background: linear-gradient(45deg, #B5A96F 0%, #AE9759 100%);
      	border-radius: 25rpx;
      	.text_fiveone{
          line-height: 50rpx;
      		font-size: 26rpx;
      		font-family: PingFang SC;
      		font-weight: 500;
      		color: #FFFFFF;
      	}
      }
    }
  }
</style>